<template>
	<view class="pageItem">
		<view class="videoItem" :style="'height:'+_height+'px'">
				<swiper class="video_box" :current="current" :indicator-dots="false" :autoplay="false" :duration="200" :vertical="true" :circular="true" @change="videoChange">
					<block v-for="(item,index) in 3" :key="'v_'+index">
						<swiper-item class="v_con">
							<view class="video" :id="'videoContain'+index"></view>
							
							<view class="tools">
								<view class="icon_box" @click="do_flow">
									<view class="iconfont icon" :class="flow_ids.includes(cur_play.id) ? 'flow_color':''">&#xe6b4;</view>
									<view class="i_txt">{{cur_play.follow||0}}</view>
								</view>
								<view class="icon_box" @click="do_col">
									<view class="iconfont icon" :class="col_ids.includes(cur_play.id) ? 'col_color':''" >&#xe6b3;</view>
									<view class="i_txt">{{cur_play.col||0}}</view>
								</view>
								<view class="icon_box" @click="shareFun" :data-share_url="cur_play.id">
									<view class="iconfont icon">&#xe6b2;</view>
									<view class="i_txt">{{$t('use.share')}}</view>
								</view>
							</view>
							
							<view class="massage">
								<view class="name">{{show_pt(cur_play)}}</view>
								<view class="msg">
									<label class="num">{{cur_play.episode.cur_num}}</label>{{$t('popular.episode')}}
									/{{$t('popular.total')}}<label class="num">{{cur_play.episode_num}}</label>
								</view>
							</view>
							<view class="more_btn" @click="$r('/pages/popular/shortDetail_h5?id='+cur_play.id)">{{$t('popular.more_sequels')}}</view>
						</swiper-item>
					</block>
				</swiper>
			</block>
		</view>
	</view>
</template>
<script>
	var previous = 0;
	import lang_mix from '@/lib/mixin/lang_mixin.js';
	import { mapState } from 'vuex';
	export default {
		mixins:[lang_mix],
		data() {
			return {
				applicationLocale:'en',
				current:0,  //当前在第几块
				autoPlay:true,
				flow_ids : [],
				col_ids : [],
				T : '',
				cur_play : {
					title : '',
					episode_num : '', //总集数
					follow : 0,
					col : 0,
					episode :{
						cur_num : ''
					}
				},
				viodeBox:'', //视频容器
				first: true,
				v_index:0,  //当前在视频数组的第几个
				videoList:[],
				play_url:'',   //当前播放的链接
				
				_width:'',
				_height:'',
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			this.flow_ids = this.vuex.appInfo.flow_ids || [];
			this.col_ids = this.vuex.appInfo.col_ids || [];
			//获取窗口消息
			this._width = document.documentElement.clientWidth;
			this._height = document.documentElement.clientHeight - 55;
		},
		mounted(){
			let that = this;
			this.tcpBoxInit();
		},
		onHide() {
			this.stopPlayer();
		},
		methods:{
			do_flow(){
				if(!this.hasLogin){
					this.login_modal();
					return false;
				}
				this.throttle(this.real_flow, 800)(this, 'throttle');
			},
			real_flow(){
				
				let url = this.site_url + 'api/auth/member/auto_flow?vid='+this.cur_play.id;
				 this.areq(url).then(res=>{
					 if(res.code == 1){
						 this.is_flow = parseInt(res.data); 
						 if(this.is_flow){
							   this.cur_play.follow++;
							   this.flow_ids.push(this.cur_play.id);
						 }else{
							  if(this.cur_play.follow > 0){
								   this.cur_play.follow--;
								   let idx = this.flow_ids.indexOf(this.cur_play.id);
								   if(idx > -1){
									   this.flow_ids.splice(idx,1);
								   }
								   
							  }  
						 }
					 }
					
				})
				
			},
			do_col(){
				if(!this.hasLogin){
					this.login_modal();
					return false;
				}
				this.throttle(this.real_col, 800)(this, 'throttle');
			},
			login_modal(){
				uni.showModal({
					title: this.$t('system.tip'),
					content: this.$t('system.tip4'),
					success:  (res) =>{
						if (res.confirm) {
							  this.$r('/pages/public/login_h5','rel')
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});	
			},
			real_col(){
				let url = this.site_url + 'api/auth/member/auto_col?vid='+this.cur_play.id;
				 this.areq(url).then(res=>{
					 if(res.code == 1){
						 this.is_col = parseInt(res.data); 
						 if(this.is_col){
						 	 this.cur_play.col++;
							  this.col_ids.push(this.cur_play.id);
						 }else{
							  if(this.cur_play.col> 0){
								  this.cur_play.col--;
								  let idx = this.col_ids.indexOf(this.cur_play.id);
								  if(idx > -1){
								  		this.col_ids.splice(idx,1);
								  }
							  }
						 }
						 this.$forceUpdate()
					 }
					
				})
			},
			throttle(fn, delay) {
				let that = this;
				// 使用闭包返回一个函数并且用到闭包函数外面的变量previous
				return function() {
					var _this = this;
					var args = arguments;
					var now = new Date().getTime();
					if (now - previous > delay) {
						fn.apply(_this, args);
						previous = now;
					} else {
						that.showMsg(that.$t('system.tip28'), 800);
					}
				};
			},
			tcpBoxInit(){
				let that = this;
				// sdk引入有顺序
				let script1 = document.createElement("script");
				script1.type = "text/javascript";
				script1.src = "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/libs/hls.min.0.13.2m.js";
				document.getElementsByTagName("head")[0].appendChild(script1);
				// 创建script标签，引入外部文件
				let script = document.createElement("script");
				script.type = "text/javascript";
				script.src = "https://web.sdk.qcloud.com/player/tcplayer/release/v4.2.1/tcplayer.v4.2.1.min.js";
				document.getElementsByTagName("head")[0].appendChild(script);
				// 引入成功
				script.onload = function () {
					that.getData();
				};
				// 引入失败
				script.onerror = function () {
					console.log("js资源加载失败了");
				};
			},
			getData(){
				let that = this;
				let url = this.site_url + 'api/index/play_detail_default';
				this.areq(url).then(res=>{
					if(res.code == 1){
						that.videoList = that.videoList.concat(res.data);
						if(that.first){  //首次进入自动播放
							that.first = false;
							that.tcpalyer();
						}
					}
				})
			},
			tcpalyer() {
				let play = this.videoList[this.v_index];
				let url = play.episode.url;
			    
				if(document.getElementById('player-container-id')){
					let video = document.getElementById("player-container-id");
					document.getElementById("player-container-id").remove();
					document.getElementById("videoContain"+this.current).appendChild(video);
					this.viodeBox.src(url)
				}else{
					let video = document.createElement("video");
					video.setAttribute("id", "player-container-id");
					video.setAttribute('playsinline',true);
					video.setAttribute('webkit-playsinline',true);
					video.setAttribute('autoplay',true);
					document.getElementById("videoContain"+this.current).appendChild(video);
					this.viodeBox = TCPlayer('player-container-id', {
						sources: [{
						   src: url, // 播放地址
						}],
						licenseUrl: 'https://license.vod2.myqcloud.com/license/v2/1305021554_1/v_cube.license',
						width: this._width,
						height: this._height
					});
				}
				this.cur_play = play;
				this.date_score_handle(play.id);
		
			},
			date_score_handle(play_id){
				if(this.hasLogin){
					//视频看一分钟获得奖励
					let cdate = this.getCurrentDate();
					let his_date = uni.getStorageSync('sign_play_date');
					let look_t = this.vuex.appInfo.look_second || 30;
					let otime = look_t * 1000;
					// if(cdate != his_date){
						 // this.T =  setTimeout(()=>{
							// let url = this.site_url + 'api/auth/play/look_get_score?play_id='+play_id;
							// this.areq(url).then(res=>{
							// 	// console.log(res)
							// 	if(res.code == 1){
							// 		uni.setStorageSync('sign_play_date',cdate);		
							// 	}
								
							// })			 
						 // },otime);
					// }	
				}
			},
			videoChange(e){
				let next_current = this.current;  //上一个块 index
				let now_current = e.detail.current; //当前块 index
				let v_len = this.videoList.length;
				if((next_current == 0 && now_current == 2) || (next_current == 1 && now_current == 0) || (next_current == 2 && now_current == 1)){
					//上划
					let _v_i = this.v_index - 1;  //判断当前之前还有没视频
					if(_v_i < 0){
						this.v_index = v_len - 1;
					}else{
						this.v_index = _v_i;
					}
				}
				if((next_current == 0 && now_current == 1) || (next_current == 1 && now_current == 2) || (next_current == 2 && now_current == 0)){
					//上划 - 加
					let _v_i = this.v_index + 1; //判断当前之后还有没视频
					if(_v_i >= v_len){
						this.v_index = 0;
					}else{
						this.v_index = _v_i;
					}
				}
				this.current = now_current;
				this.tcpalyer();
			},
			shareFun(e){
				let pid = e.currentTarget.dataset.share_url;
				let share_url = this.site_url + 'index.html#/pages/popular/shortDetail_h5?id='+pid;
				uni.showModal({
					title: this.$t('popular.link_promotion'),
					content: share_url,
					cancelText: this.$t('use.close'),
					confirmText: this.$t('use.copy'),
					confirmColor: '#23C74E',
					success(res) {
						if (res.confirm) {
							uni.setClipboardData({
								data: share_url,
								success(e) {
									uni.showToast({
										icon: 'success',
										title:''
									})
								}
							})
						}
					}
				})
			},
			getCurrentDate() {
			    let now = new Date();  
			    let year = now.getFullYear(); // 获取完整的年份(4位,1970-????)  
			    let month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以要加1，并使用padStart保证是两位数  
			    let day = String(now.getDate()).padStart(2, '0'); // 获取当前月份的日期（1-31）  
			    return `${year}${month}${day}`;  
			},
			stopPlayer(){
				//停止播放
				this.viodeBox.pause();
			}
		}
	}
</script>
<style>
page{
	background: #000000;
}
</style>
<style lang="scss">
@import url('https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.css');
.pageItem{
	padding: 0;
	padding-top: var(--status-bar-height);
}
.videoItem{
	width: 100vw;
	height: calc(100vh - var(--status-bar-height) - 55px);
	position: fixed;
	z-index: 90;
	.video_box{
		width: 100%;
		height: 100%;
		.v_con{
			width: 100%;
			height: 100%;
			.video{
				width: 100%;
				height: 100%;
				position: relative;
				z-index: 10;
				color: #fff;
			}
			.play{
				position: absolute;
				z-index: 16;
				width: 12vw;
				height: 12vw;
				top: 50%;
				left: 44%;
				transform: translateY(-50%);
				background: rgba(0, 0, 0, 0.6);
				font-size: 6vw;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 50%;
			}
			.tools{
				position: absolute;
				z-index: 15;
				width: 16vw;
				display: flex;
				flex-direction: column;
				align-items: center;
				bottom: 33vw;
				right: 1vw;
				.icon_box{
					width: 12vw;
					text-align: center;
					margin-top: 5vw;
					.icon{
						font-size: 9vw;
						color: #ffffff;
					}
					.i_txt{
						font-size: 24rpx;
						color: #ffffff;
						padding-top: 2rpx;
					}
				}
			}
			.massage{
				position: absolute;
				width: 50%;
				left: 4vw;
				bottom:12vw;
				z-index: 20;
				color: #ffffff;
				.name{
					width: 100%;
					font-size: 4.3vw;
					padding: 1.5vw 0;
					@include text_over_style(1);
				}
				.msg{
					width: 100%;
					font-size: 3.4vw;
					margin-left: -1vw;
					@include text_over_style(1);
					.num{
						padding: 0 1vw;
					}
				}
			}
			.more_btn{
				max-width: 35%;
				min-width: 25%;
				padding: 0 2vw;
				position: absolute;
				z-index: 20;
				bottom: 12vw;
				right: 4vw;
				height: 10vw;
				line-height: 10vw;
				background: $main_color_s2;
				color: #fff;
				font-size: 4vw;
				border-radius: 6vw;
				text-align: center;
			}
		}
	}
}
</style>
